<template>
  <div :class="['resume', $ua.isFromPc() ? 'z-web' : 'z-phone']">
    <div class="line"></div>
    <div class="resume-title title">
      <div>
        大事记
      </div>
    </div>
    <div class="resume-info" v-for="item in artEventData" :key="item.data_id">
      <div class="data">
        {{ item.event_time ? item.event_time.substring(0, 10) : '' }}
      </div>
      <div class="desc">
        {{ item.event }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['artEventData'],
  data() {
    return {
    }
  }
}
</script>

<style lang="less">
.resume {
  &.z-web {
    padding: 0 276px 120px;
    background: #fff;
    position: relative;

    .line {
      width: 100%;
      height: 1px;
      background: #e6d7d7;
      margin-bottom: 60px;
    }

    .resume-title {
      position: absolute;
      left: 168px;
      top: 0;
      font-size: 44px;
      font-weight: 600;
      color: #000;
    }

    .resume-info {
      margin-bottom: 40px;
      font-size: 18px;
      font-weight: 600;

      &:last-child {
        margin-bottom: 0;
      }

      .data {
        line-height: 14px;
        color: #999;
        margin-bottom: 24px;
      }

      .desc {
        color: #000;
      }
    }
  }

  &.z-phone {
    padding: pxtorem(40) pxtorem(25) pxtorem(60);

    .resume-title {
      margin-bottom: pxtorem(40);

      div {
        writing-mode: lr;
        font-size: pxtorem(36);
        font-weight: 600;
        color: #000;
        letter-spacing: pxtorem(10);
      }
    }

    .resume-info {
      margin-bottom: pxtorem(30);
      .data {
        font-size: pxtorem(22);
        font-weight: 600;
        color: #999;
        margin-bottom: pxtorem(16);
      }

      .desc {
        font-size: pxtorem(26);
        font-weight: 600;
        color: #000;
      }
    }
  }
}
</style>